<template>
  <div class="mobile-container">
    <van-skeleton title avatar :row="3" :loading="!state.loading">
      <div v-for="(v,key,i) in state.state_line">
        <template v-if="v.active!=-1">
          <van-divider>{{v.name}}</van-divider>
          <van-steps direction="vertical" :active="v.active" >
            <template v-for="(item,index) in v.lines" :key="index" >
              <van-step>
                <h3>{{item.title}}</h3>
                <p>{{item.description}}</p>
              </van-step>
            </template>
          </van-steps>
        </template>
      </div>
    </van-skeleton>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {Notify} from "vant";
import {reactive, ref} from "vue";
import {IRspApplication, IStatusTree} from "@/lib/recover";
import {defineComponent} from "vue";
import axios, {AxiosResponse} from "axios";

export default defineComponent({
  props: {
    formid:{
      type:Number,
      default:7
    },
    application_id:{
      type:Number,
      default:7,
    }
  },
  name: "mobile_status_tree",
  setup(props) {
    const debug = true;
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      state_line:{} as any,
      index:1,
      loading:false,
      now_status:0,
    })
    const getArr = function (stateTree:IStatusTree,obj:IStatusTree[]){
      let tmp = JSON.parse(JSON.stringify(stateTree));
      tmp.children = null;
      obj.push(tmp);
      // obj.push(stateTree);
      if(stateTree.children == null){
        state.state_line[state.index]={
          lines:JSON.parse(JSON.stringify(obj)),
          active:-1,
          name:'状态线'+state.index
        };
        state.index++;
        obj.pop();
        return;
      }
      for( const item of stateTree.children){
        getArr(item,obj);
      }
      obj.pop();
    }
    axios
    .get<IStatusTree,AxiosResponse<IStatusTree>>("api/form/"+props.formid+"/status")
    .then(res=>res.data)
    .then(data=>{
      if(debug){
        console.log(data)
      }
      getArr(data,[] as IStatusTree[]);
      getNowStatus();
      if(debug){
        console.log(state.state_line)
      }
    })
    // api/form/{formID}/status
    // getArr(props.statusTree,[] as IStatusTree[],1);
    const getNowStatus = async function(){
      axios
      .get<IRspApplication,AxiosResponse<IRspApplication>>("api/user/self/application/single/"+props.application_id)
      .then(res=>res.data)
      .then(data=>{
        state.now_status = data.status.id;
        setActive();
      })
    }
    const setActive = async function(){
      for( const item in state.state_line){
        if (debug){
          console.log(state.state_line[item]);
        }
        for( const line in state.state_line[item].lines){
          if(debug){
            console.log(state.state_line[item].lines[line])
          }
          if(state.state_line[item].lines[line].id == state.now_status){
            state.state_line[item].active = line;
          }
        }
      }
      state.loading=true;
    }
    const getStyle = function(item:IStatusTree){
      return {
        color:item.primary_color
      }
    }

    return {
      router,state,getStyle
    }
  }
})
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>